{% extends "base.html" %}
{% block stylesheet %}
  <link rel="stylesheet" type="text/css" href="/site_media/css/index.css" />
  <link rel="stylesheet" type="text/css" href="/site_media/plugin/easyslider/css/screen.css" />
  <link type="text/css" href="/site_media/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
{% endblock %}
{% block script %}
  <script type="text/javascript" src="/site_media/js/index.js"></script>
  <script type="text/javascript" src="/site_media/plugin/easyslider/js/easySlider1.7.js"></script>
{% endblock %}
{% block title %}Welcome to Django Web Shop {% endblock %}
{% block content %}
        <div id="left-bar">
            <div id="category-block">
                <div class="tab-title-left">Goods Categories</div>
                <div class="block-body-left">
                {% for category in categories %}
                    <h4 class="sub-tab-title">{{ category.name }}</h4>
                    <div class="sub-categories">
                        <p>{% for subitem in category.subitems %}| <a href="/search/?category={{category.name}}&subcategory{{ subitem.name }}={{ subitem.id }}">{{ subitem.name }}</a> {% endfor %}|</p>
                    </div>
                {% endfor %}
                </div>
            </div><!-- the end for category-block -->
            <div class="advertisement-block">
                <img src="/site_media/images/advertising/gw_r2_dslr.jpg" width="190px"/>
                <img src="/site_media/images/advertising/turbo_tax.jpg" width="190px"/>
                <img src="/site_media/images/advertising/electronics_sale.jpg" width="190px"/>                
            </div>
        </div><!-- the end for left-bar -->
        <div id="content">
            <div id="advertisement">
                <div id="slider"> 
                    <ul>				
                        <li><a href="http://templatica.com/preview/30"><img src="/site_media/images/advertising/01.jpg" alt="Css Template Preview" /></a></li> 
                        <li><a href="http://templatica.com/preview/7"><img src="/site_media/images/advertising/02.jpg" alt="Css Template Preview" /></a></li> 
                        <li><a href="http://templatica.com/preview/25"><img src="/site_media/images/advertising/03.jpg" alt="Css Template Preview" /></a></li> 
                        <li><a href="http://templatica.com/preview/26"><img src="/site_media/images/advertising/04.jpg" alt="Css Template Preview" /></a></li> 
                        <li><a href="http://templatica.com/preview/27"><img src="/site_media/images/advertising/05.jpg" alt="Css Template Preview" /></a></li>			
                    </ul> 
                </div>
            </div>
            <fieldset id="tody-recommend">
                <legend><img src="/site_media/images/today-recommended.png" alt="Today's Recommended" /></legend>
                {% for product in recommeded_products %}
                <div class="product">
                    <a href="{{ product_path }}/{{ product.id }}"><img src="/{{ product.image }}" class="product-img-small"/>
                    <div class="product-name">{{ product.name }}</div></a>
                    <div class="prodcut-price">{{ product.price }}€</div>
                </div>
                {% endfor %}
            </fieldset>
            <fieldset id="recently-hot">
                <legend align="left"><img src="/site_media/images/recently-hot.png" alt="Recently Hot" /></legend>
                {% for product in hot_products %}
                <div class="product">
                    <a href="{{ product_path }}/{{ product.id }}">
                    <div class="product-images">
                        <img src="/{{ product.image }}" class="product-img-small"/><br/>
                        <img src="/site_media/images/hot.png" class="hot-tab" />
                    </div>
                    <div class="product-name">{{ product.name }}</div>
                    </a>
                    <div class="prodcut-price">{{ product.price }}€</div>
                </div>
                {% endfor %}
            </fieldset>
        </div>
{% endblock %}
